class Food {
  // 食物对应的元素
  element: HTMLElement

  constructor() {
    // 获取食物dom，并且使用as告诉编译器我们一定能获取到该节点
    this.element = document.getElementById('food') as HTMLElement
  }

  // [x,y] 获取食物坐标，用于判断蛇是否吃到食物
  get x() {
    return this.element.offsetLeft
  }

  get y() {
    return this.element.offsetTop
  }

  // 随机修改食物坐标
  change() {
    // 食物位置区间 0 ~ 300-10(食物自身大小) = 0 ~ 290
    // 为保证每个位置都是10的倍数，那么随机数生成0~29，然后×10
    let randomLeft = Math.floor(Math.random() * 30) * 10
    let randomTop = Math.floor(Math.random() * 30) * 10
    this.element.style.left = randomLeft + 'px'
    this.element.style.top = randomTop + 'px'
  }
}

export default Food